<template>
  <div class='commodity'>
    <h3>
      <span>标签数：</span>
      <span>{{total}}</span>
    </h3>
     <div class='conditions'>
      <div class='leftBox'>
        <el-input v-model="listQuery.name" placeholder="请输入标签名称"></el-input>
        <el-button type="primary" class="btn">搜索</el-button>
      </div>
      <div class="rightBox">
        <el-button @click='addTag' class='addBtn' type="primary">添加标签</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="标签名称">
    </el-table-column>
    <el-table-column prop="managerId" label="团队ID">
    </el-table-column>
    <el-table-column label="状态">
      <template slot-scope="scope">
        {{scope.row.enable?'禁用':'启用'}}
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="160px"
        >
          <template slot-scope="scope">
              <el-button class='defaultBtn' @click='goDetails(scope.row)' type="text">查看</el-button>
              <el-button  class='defaultBtn' @click='editCommodity(scope.row)' type="text">编辑</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class='paginationBox'>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="1" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import { showDecimal } from "@/utils";
import { list } from "@/api/tag";
import { getToken } from '@/utils/auth';
  export default {
    name:'eleList',
    data() {
      return {
        input:"",
        total:0,
        tableData:[],
        names:{},
        listQuery:{
          limit:10,
          page:0,
          managerId:0
        }
      }
    },
    methods:{
        //标签列表
        openList(){
          this.listQuery.managerId=this.$route.query.managerId;
         if(localStorage.getItem('role')=='team'){
           this.listQuery.managerId=localStorage.getItem('id');
         }
          list(this.listQuery).then(json => {
            if(json.status === 200){
              console.log(json,'data')
              this.tableData = json.data;
              this.total = json.total;
            }
          });
        },
        getPrice(data){
           return showDecimal(data.price);
        },
        //查看商品详情
        goDetails(data){
          this.$router.push({name:'tagDetail',query:{ managerId:this.$route.query.managerId,id:data.id }});
        },
        //添加商品
        addTag(){
          this.$router.push({name:'addTag',query:{managerId:this.$route.query.managerId}});
        },
        editCommodity(row){
            this.$router.push({name:'addTag',query:{id:row.id,managerId:this.$route.query.managerId}})
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.openList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val - 1;
            this.openList();
        }
    },
    mounted(){
      this.openList();
    }
  }
</script>
<style lang="scss" scoped>
  .commodity {
    margin-top: 55px;
    background: #fff;
    padding: 25px 29px;
    .failed{
      color: #be1a21;
    }
    .imgBox {
      width: 36px;
      height: 36px;
      img {
       width: 100%;
       height: 100%;
      }
    }
    .defaultBtn{
      color: #409eff;
    }
    h3 {
      color: rgba(45, 45, 45, 1);
      font-size: 22px;
      margin-bottom: 19px;
      font-weight: 400;
      span:last-child {
        color: rgba(190, 26, 33, 1);
      }
    }
    .conditions {
      display: flex;
      justify-content: space-between;
      margin-bottom: 31px;
      .leftBox{
        width: 20%;
        display: flex;
        justify-content: space-between;
        .el-input {
          width: 70%;
        }
        .btn{
          background: #be1a21;
          color: #fff;
          border: 1px solid #be1a21;
        }
      }
      .rightBox{
        .addBtn{
          background: #be1a21;
          color: #fff;
          border: 1px solid #be1a21;
        }
      }

    }
    .paginationBox{
        text-align: right;
        margin-top: 60px;
    }
  }
</style>
